<template>
  <div class="classroom-news">
    <h4 class="fs-md news-title font-black">班级动态</h4>
    <!-- <div class="news-carousel">
      <a-carousel :dots="false" autoplay effect="scrollx" :vertical="true">
        <div>
          <img src="http://image.howzhi.com/system/block_picture_1460094695.jpg" alt="" />
        </div>
        <div>
          <img src="http://image.howzhi.com/system/block_picture_1460533852.jpg" alt="" />
        </div>
      </a-carousel>
    </div> -->
    <a-carousel :dots="false" autoplay effect="scrollx" :vertical="true">
      <div class="news-list d-flex">
        <div class="news-container d-flex">
          <div class="news-item-left">
            <img src="http://image.howzhi.com/user/2020/04-29/1416480ca8bb221005.png" alt="" class="user-avatar">
            <a class="user-name">窗台蝴蝶</a>
            <span class="">加入了</span>
            <a class="classroom-name font-primary">极致风光摄影进阶提高班</a>
          </div>
          <div class="news-item-right">
            <span class="font-light">2天前</span>
          </div>
        </div>
        <div class="news-container d-flex">
          <div class="news-item-left">
            <img src="http://image.howzhi.com/user/2019/05-15/133617145da6337098.JPG" alt="" class="user-avatar">
            <a class="user-name">镜花水月</a>
            <span class="">加入了</span>
            <a class="classroom-name  font-primary">零基础摄影入门班</a>
          </div>
          <div class="news-item-right">
            <span class="font-light">6天前</span>
          </div>
        </div>
      </div>
      <div class="news-list d-flex">
        <div class="news-container">
          <div class="news-item-left">
            <img src="http://image.howzhi.com/default/2020/09-29/160644437cea079901.jpg" alt="" class="user-avatar">
            <a class="user-name">小熊胃胀</a>
            <span class="">加入了</span>
            <a class="classroom-name font-primary">Adobe Lightroom cc后期基础入门班</a>
          </div>
          <div class="news-item-right">
            <span class="font-light">2天前</span>
          </div>
        </div>
        <div class="news-container d-flex">
          <div class="news-item-left">
            <img src="http://image.howzhi.com/default/2020/10-09/170808833be2448200.jpg" alt="" class="user-avatar">
            <a class="user-name">嘤嘤嘤</a>
            <span class="">加入了</span>
            <a class="classroom-name  font-primary">牛牛摄影入门班</a>
          </div>
          <div class="news-item-right">
            <span class="font-light">6天前</span>
          </div>
        </div>
      </div>
    </a-carousel>
  </div>
</template>

<script>
export default {
  setup () { }
}
</script>

<style lang="scss" scoped>
.classroom-news {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #f0f0f0;
  .news-title {
    position: relative;
    padding-left: 15px;
    &::after {
      content: '';
      height: 18px;
      width: 5px;
      border-radius: 12px;
      background-color: #15c288;
      position: absolute;
      top: 1px;
      left: 0px;
    }
  }
  .news-list {
    margin: 20px 0 30px;
    justify-content: space-between;
    @media (max-width: 992px) {
      flex-direction: column;
      justify-content: start;
    }
    .news-container {
      position: relative;
      align-items: center;
      padding: 0 15px;
      @media (max-width: 992px) {
        &:first-child {
          margin-bottom: 20px;
        }
      }
      .news-item-left {
        width: 70%;
        @media (min-width: 993px) {
          width: 280px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        img {
          display: inline-block;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          position: relative;
          bottom: 3px;
          margin-right: 10px;
        }
        .user-name {
          margin-right: 4px;
        }
      }
      .news-item-right {
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  }
}
</style>
